<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>缘分瓶</title>
	<link rel="stylesheet" href="css/c.css">
	<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>
<body>
	<div class="island"></div>
	<div class="beach"></div>
	<div id="salvageAnim" class="salvage-anim hide">
		<img src="img/salvage-anim.png" />
	</div>
	<div id="page" class="container">
		<div id="header">
			<h1 id="logo">缘分瓶</h1>
			<div class="login" id="btnLogin">
				<span class="btn">登录</span>
				<img src="res/100.jpg" class="uAvatar" />
			</div>
		</div>
		<div id="result" class="s hide">
			<span class="btnClose"></span>
			<span class="t_b">捞到一个瓶子<a href="javascript:;" id="btnOpen">打开看看</a></span>
			<span class="t_s">捞到一个海星<a href="javascript:;" id="btnTry">继续试试</a></span>
		</div>
		<div id="toolBar">
			<div class="tollBar-wrap">
				<a href="javascript:;" id="btnThrow" class="btnThrow">写一个<em>3</em></a>
				<a href="javascript:;" id="btnGet" class="btnGet">捞一个<em>22</em></a>
				<a href="javascript:;" id="btnBottle" class="btnBottle">我的瓶子</a>
			</div>
		</div>
		<div id="loginPanel" class="panel hide">
			<h4 class="title">登录</h4>
			<span title="关闭" class="btnClose"></span>
			<div class="content">
				<div class="inner">
					<div class="loginArea inputArea">
						<p>欢迎回来~</p>
						<input placeholder="用户名" type="text" id="uName_login">
						<input placeholder="密码" type="password" id="pwd_login">
						<button id="btnSubmitLogin" class="btn">登录</button>
						<label data-type="reg" for="linkReg"><a href="javascript:;">注册</a></label>
					</div>
					<div class="regArea inputArea hide">
						<p>快速注册</p>
						<input placeholder="用户名" type="text" id="uName_reg">
						<input placeholder="密码" type="password" id="pwd_reg1">
						<input placeholder="确认密码" type="password" id="pwd_reg2">
						<button id="btnSubmitLogin" class="btn">注册</button>
						<label data-type="login" for="linkReg"><a href="javascript:;">登录</a></label>
					</div>
					<p class="notice hide">用户名不存在</p>
				</div>
			</div>
		</div>
		<div id="writeBottle" class="panel hide">
			<h4 class="title">丢瓶子</h4>
			<span title="关闭" class="btnClose"></span>
			<div class="content">
				<div class="inner">
					<textarea id="bottleMsg"></textarea>
					<span class="notice">瓶子不能为空</span>
					<button id="btnSubBottleMsg">丢到海里</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script src="js/zepto.js"></script>
<script src="js/underscore.js"></script>
<script src="js/i.js"></script>
<script type="text/html" id="tpl_bottleList">
	<div id="bottleList" class="panel">
			<h4 class="title">我的瓶子</h4>
			<span title="关闭" class="btnClose"></span>
			<div class="content">
				<div class="inner">
					<ul class="list">
						<% _.each(list,function(bottle) {%>
							<li data-bID="<%=bottle.bID%>" data-tID="<%=bottle.tID%>">
								<img src="<%=bottle.tAvatar%>" />
								<div class="msg">
									<p><%=bottle.lastMsg%></p>
								</div>
								<div class="subInfo">
									<p class="name <%=bottle.tSex%>">
										<em class="fmale">&#9792;</em>
										<em class="male">&#9794;</em>
										<%=bottle.tName%>
									</p>
									<p class="date"><%=Util.format(bottle.tTime)%></p>
								</div>
							</li>
						<%})%>
					</ul>
				</div>
			</div>
	</div>
</script>
<script type="text/html" id="tpl_bottle">
	<div id="bottle" class="panel" data-bid='<%=bID%>'>
		<h4 class="title">捡到的瓶子</h4>
		<span title="关闭" class="btnClose"></span>
		<div class="content">
			<div class="inner">
				<div class="userInfo clearfix">
					<img src="<%=other.avatar%>" />
					<p  class="name <%=other.sex%>">
						<em class="fmale">&#9792;</em>
						<em class="male">&#9794;</em>
						<%=other.name%>
					</p>
				</div>
				<ul class="msgArea">
					<% _.each(msgList,function(msg) {
						var role = msg.type == 't' ? role_t : role_g;
						var className = role.id == other.id ? 'other' : 'me'
					%>
						<li class="<%=className%> clearfix">
							<div class="avatar"><img src="<%=role.avatar%>" /></div>
							<p class="time"><%=Util.format(msg.time)%></p>
							<div class="msg">
								<p><%=msg.msg%></p>
							</div>
						</li>
					<% }) %>
				</ul>
				<div class="leaveMsg">
					<p>回复<%=other.name%>：</p>
					<textarea id="msgInput"></textarea>
					<span class="notice">登录后才可以回复哦</span>
					<button id="btnMsgSub">回复</button>
				</div>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tpl_msg">
	<li class="<%= type%> clearfix">
		<div class="avatar"><img src="<%=avatar%>"></div>
		<p class="time"><%=Util.format(time)%></p>
		<div class="msg">
			<p><%=msg%></p>
		</div>
	</li>
</script>
<script type="text/html" id="tpl_playerInfo">
	<div id="playerInfo" class="panel">
		<h4 class="title">用户中心</h4>
		<span title="关闭" class="btnClose"></span>
		<div class="content">
			<div class="inner">
				<img class="avtImg" src="<%=avatar%>" />
				<p class="name"><span><%=name%></span></p>
				<ul id="selfInfo" class="info">
					<li class="info-title">个人统计</li>
					<li class="clearfix">
						<div class="label">可捞瓶子</div>
						<div class="count"><%=user.count_get%></div>
					</li>
					<li class="clearfix">
						<div class="label">可丢瓶子</div>
						<div class="count"><%=user.count_throw%></div>
					</li>
					<li class="clearfix">
						<div class="label">已捞瓶子</div>
						<div class="count"><%=user.hasGot%></div>
					</li>
					<li class="clearfix">
						<div class="label">已丢瓶子</div>
						<div class="count"><%=user.hasThrow%></div>
					</li>
				</ul>
				<ul id="sysInfo" class="info">
					<li class="info-title">系统统计</li>
					<li class="clearfix">
						<div class="label">在线男</div>
						<div class="count"><%=sys.maleOL%></div>
					</li>
					<li class="clearfix">
						<div class="label">在线女</div>
						<div class="count"><%=sys.fmaleOL%></div>
					</li>
					<li class="clearfix">
						<div class="label">海里的瓶子</div>
						<div class="count"><%=sys.bottles_unread%></div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</script>
